<script lang="ts">
	import '@unocss/reset/tailwind.css';
	import 'uno.css';
	import Particles from '$lib/particles.svelte';
	import Header from '$lib/layout/Header.svelte';

	import Footer from '$lib/layout/footer.svelte';
	let src = '/img/logo.png';

	let alt = '全栈';
	import Mynav from '$lib/layout/nav.svelte';
	let testnav = [
		{ src: 'graph', name: '可视化gl' },
		{ src: 'g6', name: '数据可视化' },
		{ src: 'threlte', name: 'threlte' },
		{ src: 'md', name: 'MD文档' },
		{ src: 'api', name: 'API' },
		{ src: 'posts', name: 'blog' },
		{ src: 'learnsvelte', name: 'Svelte官方例子' },
		{ src: 'testsvelte', name: 'Svelte自己练习' },
		{ src: 'ts', name: 'TypeScript' },
		{ src: 'animejs', name: 'animejs' },
		{ src: 'css3', name: 'Css3' },
		{ src: 'svg', name: 'Svg' },
		{ src: 'photos', name: 'photos' },
		{ src: 'k8s', name: '云开发' },
		{ src: 'webgl', name: 'webgl例子' }
	];
</script>

<div class="main">
	<Header {src} {alt} />
	<Mynav {testnav} />
	<Particles />
	<div>
		<slot />
	</div>

	<Footer />
</div>

<style global>
	.main {
		@apply pt-2 m-20 text-white  w-4/5 mxauto z-20;
	}

	.card {
		color: rgba(255, 255, 255, 0.8);
		/* position: absolute; */
		/* right: 100px; */
		/* bottom: 100px; */
		z-index: 10;
		font-family: sans-serif;
		/* text-align: center; */
		/* width: 300px; */
		/* height: 120px; */
		/* border-bottom: 1px solid rgba(255, 255, 255, 0.4); */
		/* border-left: 1px solid rgba(255, 255, 255, 0.4); */
		background: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));
		box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 20px rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(6px); /*  元素后面区域添加模糊效果 */
		/* border-radius: 20px; */
		/* transform: rotate(-15deg); */
	}
</style>
